<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>仓库管理</li>
			    <li>出库列表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<input type="text" class="form-control" v-model="search.name" placeholder="商品名称">
						<input type="text" class="form-control" v-model="search.number" placeholder="单据编号">
						<select class="form-control" v-model="search.pagetype">
							<option value=""> - 选择分类 - </option>
							<option value="0"> 其它出库单 </option>
							<option value="1"> 盘亏单 </option>
						</select>
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-default" @click="resetForm()">重置</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>单据日期</th>
								<th>单据编号</th>
								<th>单据类型</th>
								<th>制单人</th>
								<th>审核状态</th>
								<th>备注信息</th>
								<th>相关操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>
									{{ row.time }}
								</td>
								<td>{{ row.number }}</td>
								<td>{{ row.pagetype == 0? '其它出库单' : '盘亏单'  }}</td>
								<td>{{ row.userinfo.true_name }}</td>
								<td>{{ row.type == 0? '未审核' : '已审核' }}</td>
								<td>{{ row.data }}</td>
								<td>
									<a v-if="row.type==0" href="#" @click="otpurchaseUpdate(row.id)" ><i class="fa"> </i>  审核</a>
									<a v-if="row.type==0" href="#" @click="delOtpurchase(row.id)" ><i class="fa"> </i>  删除</a>
									<a href="#" @click="openOtpurchase(row.id)" ><i class="fa"> </i>  详情</a>
								</td>
							</tr>
							<tr v-if="rows.length===0">
								<td colspan="8" style="color:red">查询无记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<el-dialog
		title="详情"
		:visible.sync="dialogVisible"
		width="70%">
		<div>
			<el-table
			:data="tableData"
			style="width: 100%">
			<el-table-column
			  prop="warehouse"
			  label="所属仓库"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="picture"
			  label="商品图"
			  width="180">
				<template slot-scope="scope">
				<a :href="scope.row.goodsinfo.picture" title='点击看大图' target="_BLANK" class="pre_view">
					<img :src="scope.row.goodsinfo.pic_tmb" height="38">
				</a>
		  	 	</template>
			</el-table-column>
			
			<el-table-column
			  prop="goodsinfo.name"
			  label="商品名称"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="nums"
			  label="数量">
			</el-table-column>
			<el-table-column
			  prop="spec"
			  label="尺码">
			</el-table-column>
			<el-table-column
			  prop="color"
			  label="颜色">
			</el-table-column>
			<el-table-column
			  prop="origin_price"
			  label="成本价">
			</el-table-column>
		  </el-table>
		  <div id="pageBar">
			<vue-page :total_page='info_total_page' :cur_page='info_cur_page' @do-page='getotpurchaseInfo'></vue-page>
		  </div>
		</div>
		</el-dialog>
	</div>	
	<!-- 商品编辑模板 -->
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					name: '',
					number:'',
					pagetype: '',
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				title:'库存详情',
				dialogVisible:false,
				tableData:[],
				OtpurchaseId:'',
				info_total_page:0,
				info_cur_page:1,
				
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			created: function(){
				this.getList();
			},
			methods:{
				openOtpurchase(id){
					this.OtpurchaseId = id;
					this.getotpurchaseInfo();
					this.dialogVisible = true;
					
				},
				getotpurchaseInfo(page=1) {
					let t = this;
					$.post("{%:url('Warehouse/otsale_info')%}?id=" + t.OtpurchaseId + '&page=' + page,{},function(rsp){
						if(rsp.code == 1){
							t.tableData = rsp.data.rows;
							t.info_total_page = rsp.data.total_page;
							t.info_cur_page = rsp.data.page;
						}
					},'json')
				},
				otpurchaseUpdate(id) {
					let t = this;
					$.post("{%:url('Warehouse/auditing_otsale')%}?id=" + id,{},function(rsp){
						if(rsp.code == 1){
							t.$message.success(rsp.msg);
							
						}else{
							t.$message.error(rsp.msg);
						}
						t.getList(t.cur_page);
					},'json')
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Warehouse/otsale_list')%}?page=" + page,data,function(rsp){
						console.log({rsp});
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				delOtpurchase: function(id){
					var _this = this;
					$.post("{%:url('Warehouse/del_otsale')%}?id=" + id,{},function(rsp){
						console.log({rsp});
						if(rsp.code == 1){
							_this.$message.success(rsp.msg);
							_this.getList(_this.cur_page);
						}else{
							_this.$message.error(rsp.msg);
						}
						
					},'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				}	
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	

	</script>
</body>

</html>